<template>
    <div>
        <classification :category1_list="categoryStore.category1_attr_list" :is_attr_spu="2"
            v-model:category1_id="category1_id" v-model:category2_id="category2_id" v-model:category3_id="category3_id"
            :page_no="PageNo" :page_size="pageSize" :category_disabled="scene == 1">
        </classification>
        <el-card shadow="always" class="attr-card">
            <div v-if="scene == 0">
                <el-button type="primary" size="default" @click="scene = 1" :disabled="!category3_id">添加SPU</el-button>
                <el-table :data="categoryStore.spu_list" border class="spu-table">
                    <el-table-column label="序号" type="index" width="120" align="center"></el-table-column>
                    <el-table-column label="SPU名称" width="150" align="center" prop="spuName"></el-table-column>
                    <el-table-column label="SPU描述" align="center" prop="description"></el-table-column>
                    <el-table-column label="操作" width="280" align="center">
                        <template #default="scope">
                            <el-button type="primary" size="default" @click="handle_view_sku(scope.row)"
                                icon="View"></el-button>
                            <el-button type="primary" size="default" @click="handle_add_sku(scope.row)"
                                icon="Plus"></el-button>
                            <el-button type="primary" size="default" @click="handle_edit(scope.row)"
                                icon="Edit"></el-button>
                            <el-popconfirm title="确定删除吗？" @confirm="handle_delete(scope.row)">
                                <template #reference>
                                    <el-button type="danger" size="default" icon="Delete"></el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination v-model:current-page="PageNo" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 30]"
                    :background="true" layout="  sizes,prev, pager, next, ->,jumper,total"
                    :total="categoryStore.SPU_total"
                    @current-change="categoryStore.getSpu_list(PageNo, pageSize, category3_id)"
                    @size-change="handle_size_change" />
            </div>
            <div v-if="scene == 1">
                <add_edit_form ref="add_edit_form_ref" v-model:scene="scene" :now_edit_spu="now_edit_spu"
                    :flush_spu_list="handle_size_change" :category3_id="category3_id" />
            </div>
            <div v-if="scene == 2">
                <add_sku ref="add_sku_ref" v-model:scene="scene" />
            </div>
            <el-dialog v-model="sku_dialog_visible" title="SKU列表">
                <el-table :data="sku_list" border>
                    <el-table-column label="SKU名称" width="120" align="center" prop="skuName"></el-table-column>
                    <el-table-column label="SKU价格" width="120" align="center" prop="price"></el-table-column>
                    <el-table-column label="SKU重量" width="120" align="center" prop="weight"></el-table-column>
                    <el-table-column label="SKU图片" align="center" prop="skuDefaultImg">
                        <template #default="scope">
                            <el-image :src="scope.row.skuDefaultImg" style="width: 100px;height: 100px;" />
                        </template>
                    </el-table-column>

                </el-table>

            </el-dialog>

        </el-card>

    </div>
</template>

<script setup lang="ts">
import add_edit_form from './add_edit_form.vue';
import add_sku from './add_sku.vue';
import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
import useCategoryStore from '@/store/modules/category'
import type { SkuInfoData, SpuData } from '@/api/product/spu/type';
import { reqSkuList, reqSpuDelete } from '@/api/product/spu';
import { ElMessage } from 'element-plus';
const categoryStore = useCategoryStore()
let sku_dialog_visible = ref(false)
let scene = ref(0)
let PageNo = ref(1)
let pageSize = ref(5)
let category1_id = ref<number>(0)
let category2_id = ref<number>(0)
let category3_id = ref<number>(0)
//addsku组件实例
let add_sku_ref = ref()
let sku_list = ref<SkuInfoData[]>([])
let now_edit_spu = ref<SpuData>({
    spuName: '',
    description: '',
    category3Id: 0,
    tmId: 0,
    spuSaleAttrList: [],
    spuImageList: []
})
onMounted(() => {
    categoryStore.getCategory1_attr_list();
    now_edit_spu.value = {
        id: 0,
        spuName: '',
        description: '',
        category3Id: 0,
        tmId: 0,
        spuSaleAttrList: [],
        spuImageList: []
    }
})
function handle_size_change() {
    PageNo.value = 1;
    now_edit_spu.value = {
        spuName: '',
        description: '',
        category3Id: 0,
        tmId: 0,
        spuSaleAttrList: [],
        spuImageList: []
    }
    console.log(now_edit_spu.value)
    categoryStore.getSpu_list(PageNo.value, pageSize.value, category3_id.value)

}
function handle_edit(row: any) {
    now_edit_spu.value = row
    scene.value = 1
}
function handle_add_sku(row: any) {
    now_edit_spu.value = row
    scene.value = 2
    nextTick(() => {
        console.log(add_sku_ref.value)
        if (add_sku_ref.value) {
            add_sku_ref.value.get_init_data(category1_id.value, category2_id.value, now_edit_spu.value)
        }
    })
}
async function handle_view_sku(row: any) {
    const res = await reqSkuList(row.id)
    if (res.code == 200) {
        sku_list.value = res.data
        sku_dialog_visible.value = true
    }
}
async function handle_delete(row: any) {
    const res = await reqSpuDelete(row.id)
    if (res.code == 200) {
        ElMessage.success('删除成功')
        handle_size_change()
    }
    else{
        ElMessage.error('删除失败')
    }
}
onBeforeUnmount(()=>{
    categoryStore.clearAll_list()
})
</script>
<style lang="less">
@import url('../../../styles/product/attr.less');

.spu-table {
    margin: 18px 0;
}
</style>
